<template>
  <div>
    <q-button @click="drawer = true" type="text"> 编辑静态数据 </q-button>

    <q-drawer
      title="编辑静态数据"
      size="800px"
      :wrapperClosable="false"
      :visible.sync="drawer"
    >
      <!-- mock -->
      <q-tabs v-model="activeMode" type="card" :before-leave="onBeforeTabLeave">
        <q-tab-pane label="可视模式" name="table">
          <DynamicTable
            v-if="activeTableTab"
            ref="dynamicTableRef"
            :table-head-data="tableHeadData"
            :data-ids="tableDataIds"
            :is-custom-row="isCustomRow"
            :disabled="false"
          />
        </q-tab-pane>
        <q-tab-pane label="Json模式" name="json">
          <JsonEditor ref="jsonEditorRef" :data-ids="tableDataIds" />
        </q-tab-pane>
      </q-tabs>
      <span slot="footer" class="dialog-footer">
        <q-button type="primary" @click="handleSave">确定</q-button>
      </span>
    </q-drawer>
  </div>
</template>

<script >
export default {
  name: 'EventSetter',
};
</script>
<script setup>
import { ref, getCurrentInstance } from '@vue/composition-api';
import DynamicTable from './components/dynamic-table';
import JsonEditor from './components/json-editor';
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  onChange: {
    type: Function,
    default: () => {},
  },
});
const _value = ref(props.value);
const { proxy } = getCurrentInstance();
const drawer = ref(false);
const activeMode = ref('table');
const tableHeadData = ref([
  {
    label: '事件名称',
    prop: 'name',
    type: 'text',
    required: true,
    component: 'CustomSelect',
    componentProps: {
      options: [
        {
          label: '事件1',
          value: '事件1',
        },
        {
          label: '事件2',
          value: '事件2',
        },
      ],
    },
  },
]);
const tableDataIds = ref([]);
const isCustomRow = ref(true);

const activeTableTab = ref(true);
const dynamicTableRef = ref(null);
const jsonEditorRef = ref(null);
const onBeforeTabLeave = async (to, from) => {
  // 切换至可视模式
  if (to === 'table' && from === 'json') {
    const isOk = jsonEditorRef.value.validate();
    if (!isOk) {
      proxy.$message.error('JSON格式不正确，无法转换为可视数据!');
      return false;
    }

    const data = jsonEditorRef.value.getValues();
    activeTableTab.value = false;
    await nextTick();
    activeTableTab.value = true;
    await nextTick();
    dynamicTableRef.value.setValues(data);
  } else if (to === 'json' && from === 'table') {
    // 切换至JSON模式
    const data = dynamicTableRef.value.getValues();
    jsonEditorRef.value.setValues(data);
  }
  return true;
};
const handleSave = () => {
  const data = dynamicTableRef.value.getValues();
  const json = JSON.stringify(data, null, 2);
  props.onChange(json);
  drawer.value = false;
};
</script>
<style lang="scss" scoped>
::v-deep .q-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .q-tabs__header {
    flex: 0;
  }
  .q-tabs__content {
    flex: 1;
    .q-tab-pane {
      height: 100%;
    }
  }
}
</style>


